
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/timerLine-canvas.js"></script>
		<style>
			.btn{
				background-color: #fff;
				border: 1px solid #9E9E9E;
			}
			.btn:hover{
				background-color: #f3eded;
				border: 1px solid skyblue;
			}
			.toolBar{
				padding: 5px;
				background: #d4cfcf;
			}
			.content{
				width:100%;
				height: 60px;
			}
		</style>
		<div class="toolBar">
			<input type="button" class="btn" value="开始走动" id="beginRun" onclick="beginRun()"/>
			<input type="button" class="btn" value="停止走动" id="stopRun" onclick="stopRun()"/>
			<label>选中的时间：</label><label id="selectTime"></label>
			
		</div>
		<div class="content">
			<canvas class="timeLine" id="timeLine" style="width:1000px;" width="1000px"height="50px"></canvas>
		</div>
		
		<script>
			var timeLine=new TimeSlider('timeLine',{
				mouseDown:function(){console.log("mouseDown")},
				mouseUp:function(time){
					var times=new Date(time);
					$("#selectTime").text(times.getHours()+"小时"+times.getMinutes()+"分"+times.getSeconds()+"秒");
					console.log("mouseUp",times)
					
					},
				mouseMove:function(){console.log("mouseMove")},
				mouseOut:function(){console.log("mouseOut")}
		});
			
			var timeSpan=-1
			function beginRun(){
				console.log('beginRun');
			timeSpan=setInterval(function(){
					var nowTime=new Date().getTime();
					timeLine.setTimeToMiddle(nowTime);
					
				},1000)
			}
			function stopRun(){
				console.log('stopRun');
				clearInterval(timeSpan);
			}
console.log('timeLine',timeLine);
		</script>
	</body>
</html>
